<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imglist{
            width: 95%;
            margin: 0 auto;
        }

        #imglist img{
            width: 600px;
            height: 350px;
            background: url('../imgs/loading.gif') no-repeat center center;
        }
    </style>
</head>
<body>
    <h1>下滑加载图片</h1>

    <div id="imglist">
        <img data-src="../imgs/Meinv001.jpg" >
        <img data-src="../imgs/Meinv002.jpg" >
        <img data-src="../imgs/Meinv003.jpg" >
        <img data-src="../imgs/Meinv004.jpg" >
        <img data-src="../imgs/Meinv005.jpg" >
        <img data-src="../imgs/Meinv006.jpg" >
        <img data-src="../imgs/Meinv007.jpg" >
        <img data-src="../imgs/Meinv008.jpg" >
        <img data-src="../imgs/Meinv009.jpg" >
        <img data-src="../imgs/Meinv010.jpg" >
        
    </div>
    <script>
        // 获取img 集合
        var imglist = document.getElementById('imglist');
        var imgs = imglist.getElementsByTagName('img');

        //获取imglist 的宽度
        
        var box_width = imglist.offsetWidth;

        var view_height = document.documentElement.clientHeight;

        var x_number = Math.floor(box_width / imgs[0].offsetWidth);

        var first_number = Math.ceil ((view_height - imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number;

        var m = 0;

        loadImage(m,first_number);

        m += first_number;


        window.onscroll = function (){
            if (m >= imgs.length) return;
            var top = document.body.scrollTop || document.documentElement.scrollTop;

            var img_top = imgs[m].offsetTop;

            if ((view_height + top) >= img_top){

                loadImage(m, x_number);

                m += x_number;
            }
        }

        function loadImage(start, nums){
            for( var i = start; i < (start + nums); i++){
                if (i >= imgs.length) return; 
                    (function(i){
                        setTimeout(function(){
                            imgs[i].src = imgs[i].getAttribute('data-src');
                        }, 500);
                    })(i);
            }
        }
    </script>
</body>
</html>